<template>
  <div class="right-table-layout">
    <div class="r-l-navigation">
      <span>{{ wsStore.menuText }}</span>
      <span>{{ wsStore.projectText }}</span>
      <span>{{ wsStore.gatewayText }}</span>
    </div>
    <div class="r-l-search" v-if="props.slotName.includes('search')">
      <slot name="search"></slot>
    </div>
    <div class="r-l-operation" v-if="props.slotName.includes('operation')">
      <slot name="operation"></slot>
    </div>
    <div class="r-l-table" v-if="props.slotName.includes('table')">
      <slot name="table"></slot>
    </div>
    <div class="r-l-pagination" v-if="props.slotName.includes('pagination')">
      <slot name="pagination"></slot>
    </div>
  </div>
</template>

<script setup>
import { workbenchScreenStore } from "@/pinia/workbenchScreen";
const wsStore = workbenchScreenStore();
const props = defineProps({
  slotName: {
    type: Array,
    default: ['navigation', 'search', 'operation', 'table', 'pagination']
  }
})
defineOptions({ name: 'RightTableLayout' })
</script>

<style lang="scss">
.right-table-layout {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  margin-left: 0.5rem;

  .r-l-navigation {
    min-height: 1.5rem;
    background-color: #383838;
    border: 1px #a88282 solid;
    border-radius: 0.3rem;
    box-shadow: 0 0.125rem 0.25rem #4a4c45;
    margin-top: 0.5rem;
    padding: 0.5rem;

    span {
      color: #fff;
    }
  }

  .r-l-search {
    background-color: #383838;
    border: 1px #a88282 solid;
    border-radius: 0.3rem;
    box-shadow: 0 0.125rem 0.25rem #4a4c45;
    margin-top: 0.1rem;
    padding: 0.5rem;
  }

  .r-l-operation {
    background-color: #383838;
    border: 1px #a88282 solid;
    box-shadow: 0 0.125rem 0.25rem #4a4c45;
    border-radius: 0.3rem;
    padding: 0.5rem;
    min-height: 2rem;

    // .el-button+.el-button {
    //   margin-left: 0rem;
    //   margin-right: 1rem;
    // }

    .el-icon {
      margin-right: 0.22rem;
    }

    .el-button {
      background-color: #217093;
      color: #fff;
      border: none;
    }
  }

  .r-l-table {
    flex: 1;
    background-color: #383838;
    border: 1px #a88282 solid;
    box-shadow: 0 0.125rem 0.25rem #4a4c45;
    border-radius: 0.3rem;
    padding: 0.5rem;
    // overflow: auto;
    overflow: hidden;
  }

  .r-l-pagination {
    background-color: #383838;
    border: 1px #a88282 solid;
    box-shadow: 0 0.125rem 0.25rem #4a4c45;
    border-radius: 0.3rem;
    padding: 0.5rem 0.3rem;
  }

}
</style>
